<template>
    <div>
        首页1
        <div @click="skipFn">
            点击弹框
        </div>
        <Shot :visible="visible" :direction="'right'" @close="closeFn">
            <div class="shop">
                弹框内容
            </div>
        </Shot>
    </div>
</template>

<script setup>
const visible = ref(false);
const skipFn = ()=>{
    visible.value = true;
}
// 关闭
const closeFn = ()=>{
    visible.value = false;
    console.log(visible.value);
    
}
</script>

<style lang="scss" scoped>
.page{
    .shop{
        background-color: white;
        width: 400px;
        height: 300px;
    }
}
</style>